<template>
  <app-wrapper>
    <a-layout class="ic-layout">
      <a-layout-sider
        v-model="collapsed"
        :trigger="null"
        :width="256"
        class="ic-fix-sider"
      >
        <div class="ic-sider-menu-logo">
          <NuxtLink to="/">
            <img src="@/assets/logo.svg" alt="iot">
            <h1>Vue SSR Example</h1>
          </NuxtLink>
        </div>
        <menu-bar />
      </a-layout-sider>
      <a-layout :style="{ marginLeft: collapsed ? '80px' : '256px' }">
        <a-layout-header class="ic-header">
          <span
            class="ic-header-trigger"
            @click="() => toggleCollapsed(!collapsed)"
          >
            <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
          </span>
          <div class="ic-header-menu">
            <NuxtLink to="/console/dashboard" :class="{ active: module === 'console' }">
              <a-icon type="dashboard" />
              <span>{{ $t('header.menu.console') }}</span>
            </NuxtLink>
            <NuxtLink to="/monitor/compared" :class="{ active: module === 'monitor' }">
              <a-icon type="fund" />
              <span>{{ $t('header.menu.monitor') }}</span>
            </NuxtLink>
            <NuxtLink to="/maintain/operation" :class="{ active: module === 'maintain' }">
              <a-icon type="tool" />
              <span>{{ $t('header.menu.maintain') }}</span>
            </NuxtLink>
            <NuxtLink to="/settings/tenant" :class="{ active: module === 'settings' }">
              <a-icon type="setting" />
              <span>{{ $t('header.menu.settings') }}</span>
            </NuxtLink>
          </div>
          <right-content />
        </a-layout-header>
        <a-layout-content>
          <Nuxt />
        </a-layout-content>
        <a-layout-footer>
          <global-footer />
        </a-layout-footer>
      </a-layout>
    </a-layout>
  </app-wrapper>
</template>
<script lang="ts">
import { namespace } from 'vuex-class'
import { Vue, Component } from 'vue-property-decorator'

import AppWrapper from '@/components/AppWrapper.vue'
import RightContent from '@/components/RightContent.vue'
import GlobalFooter from '@/components/GlobalFooter.vue'
import { TOGGLE_SIDER_COLLAPSED } from '@/enums/mutation-types'
import { ModuleEnum } from '@/enums/module.enum'
import MenuBar from '@/components/MenuBar/MenuBar.vue'

const appSpace = namespace('app')

@Component({
  components: {
    AppWrapper,
    RightContent,
    GlobalFooter,
    MenuBar
  }
})
export default class DefaultLayout extends Vue {
  @appSpace.State('siderCollapsed')
  private siderCollapsed!: boolean

  @appSpace.State('module')
  private module!: ModuleEnum

  @appSpace.Mutation(TOGGLE_SIDER_COLLAPSED)
  private toggleSiderCollapsed!: (collapsed: boolean) => void

  private collapsed: boolean = false

  private mounted () {
    this.collapsed = this.siderCollapsed
  }

  private toggleCollapsed (collapsed: boolean) {
    this.collapsed = collapsed
    this.toggleSiderCollapsed(collapsed)
  }
}
</script>
<style lang="less">
@import "../assets/styles/vars";

.ic-header {
  background: #ffffff !important;
  padding: 0 !important;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);
  z-index: 10;
}

.ic-header-menu {
  display: inline-block;
  flex-wrap: nowrap;

  a {
    height: 64px;
    line-height: 64px;
    vertical-align: top;
    padding: 0 16px;
    display: inline-block;
    transition: all .3s,padding 0s;
    border-bottom: solid 3px transparent;
    color: inherit;
    float: none;

    &:hover {
      background: rgba(0,0,0,.025);
      color: inherit;
    }

    .anticon {
      line-height: inherit;
      margin-right: 3px;
    }
  }

  .active {
    color: @primary-color;
    border-color: @primary-color;

    &:hover {
      color: @primary-color;
    }
  }
}

.ic-layout {
  height: 100%;
  overflow: auto;
  background-color: #f0f2f5;
}

.ic-fix-sider {
  overflow: auto;
  height: 100vh;
  position: fixed !important;
  left: 0;
  z-index: 10;
}

.ic-sider-menu-logo {
  position: relative;
  height: 64px;
  padding-left: 24px;
  overflow: hidden;
  transition: all .3s;
  line-height: 64px;
  background: #001529;

  img {
    height: 32px;
    width: 32px;
    vertical-align: middle;
  }

  h1 {
    display: inline-block;
    color: #fff;
    font-size: 20px;
    margin: 0 0 0 8px;
    font-family: Avenir,Helvetica Neue,Arial,Helvetica,sans-serif;
    font-weight: 600;
    vertical-align: middle;
  }
}

.ic-header-trigger {
  height: 64px;
  line-height: 64px;
  vertical-align: top;
  padding: 0 22px;
  display: inline-block;
  cursor: pointer;
  transition: all .3s,padding 0s;

  &:hover {
    background: rgba(0,0,0,.025);
  }

  .anticon {
    font-size: 20px;
    vertical-align: -.225em;
  }
}
.ic-header-right-content {
  margin-right: 8px;
  float: right;
  height: 100%;
  margin-left: auto;
  overflow: hidden;

  .ic-account-avatar, .ic-select-lang {
    display: inline-block;
    height: 100%;
    padding: 0 12px;
    cursor: pointer;
    transition: all .3s;

    &:hover {
      background: rgba(0,0,0,.025);
    }
  }

  .ic-select-lang {
    line-height: 64px;
    vertical-align: top;
  }
}
</style>
